<template>
  <div>
    <el-container>
      <el-main>
        <el-tabs type="border-card">
          <el-tab-pane label="角色列表">
            <!--form-->
            <el-card class="card-container">
              <el-form :model="roleForm">
                <el-row :gutter="15">
                  <!-- 角色名称 -->
                  <el-col :span="8">
                    <el-form-item label="角色名称">
                      <el-input v-model="roleForm.roleName" placeholder="请输入角色名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 角色编码 -->
                  <el-col :span="7">
                    <el-form-item label="角色编码">
                      <el-input v-model="roleForm.rolePerm" placeholder="请输入角色编码"></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 状态 -->
                  <el-col :span="9">
                    <el-form-item label="状态">
                      <el-select v-model="roleForm.enabled" placeholder="请选择启动状态">
                        <el-option v-for="item in dicts.system_global_status" :key="item.id" :label="item.k"
                          :value="item.v"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item>
                      <el-button icon="search" type="primary" @click="getRolePage">搜索</el-button>
                      <el-button icon="refreshLeft" @click="roleReset">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
            <!--下面表格-->
            <div style="height: 60vh; overflow-y: auto;">
              <el-card>
                <div class="toolbar" style="z-index:0;">
                  <el-button @click="bthDirlog" icon="plus" type="primary">新增</el-button>
                  <RoleDialog v-if="dialogVisible" v-model:dialogVisible="dialogVisible" @dialog-visible="close"
                    @roleChange="close" :roleID="roleID" />
                </div>
                <el-table :data="tableData" border>
                  <el-table-column type="selection"></el-table-column>
                  <el-table-column prop="roleName" align="center" label="角色名称"></el-table-column>
                  <el-table-column prop="rolePerm" align="center" label="权限字符"></el-table-column>
                  <el-table-column label="是否启用" align="center">
                    <template #default="{ row }">
                      <el-tag>{{ row.enabled ? '启用' : '禁用' }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" align="center" label="创建时间"
                    :formatter="formatter"></el-table-column>
                  <el-table-column label="操作" align="center" width="220" fixed="right">
                    <template #default="{ row }">
                      <div class="sys-table-main-actions">
                        <div class="sys-table-main-actions">
                          <el-link icon="edit" type="primary" :underline="false" @click="bthDirlog(row.id)">编辑</el-link>
                          <el-link icon="delete" type="danger" :underline="false" style="margin: 0 8px"
                            @click="roleDel(row.id)">删除</el-link>
                          <router-link class="el-link el-link--error" type="success" to="/">分配用户</router-link>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination :total="totals" @update:current-page="handleCurrentPageUpdate"
                  @update:page-size="handlePageSizeUpdate">
                </pagination>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="回收站">回收站</el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
// 获取用户信息
import { rolePage, Role, roleDelete } from '@api/role'
// element-plus组件
import { TableColumnCtx } from 'element-plus'
// 引入vue内的东西
import { ComponentInternalInstance, getCurrentInstance, onBeforeMount, ref } from 'vue'
// 时间戳？
import tool from '@utils/tool'
// 增加的弹框
import RoleDialog from './roleDialog.vue'
// 引入element-plus的提示
import { ElMessage, ElMessageBox } from 'element-plus'
// table表格数据
const tableData = ref<Role[]>([])
// 分页 一页显示多少条数据
const totals = ref(0)
// table表格的默认数据都是什么
const roleForm = ref({
  current: 1,
  size: 5,
  roleName: '',
  rolePerm: '',
  enabled: ''
})
// 获取数据
const getRolePage = async () => {
  const res = await rolePage(roleForm.value)
  const { records, total } = res.data
  // 统计一共多少条数据
  totals.value = total
  tableData.value = records
}
const roleID = ref('')
// 控制弹框显示
const dialogVisible = ref<boolean>(false)
// 新增学院
const bthDirlog = (id: string) => {
  if (typeof (id) == 'string') {
    roleID.value = id
  } else {
    roleID.value = ''
  }
  dialogVisible.value = true
}

//接收子传递过来的数据
const close = (data: boolean) => {
  dialogVisible.value = data
  getRolePage()
}
// 声明周期
onBeforeMount(() => {
  const { proxy } = getCurrentInstance() as ComponentInternalInstance
  if (proxy) {
    // system_global_status 全局状态[启用/禁用] 这个东西是管后端去要的
    // (proxy as any).getDicts(['system_global_status'])
    (proxy as any).getDicts(['system_global_status', 'system_global_gender'])
  }
  getRolePage()
})
// 时间戳转换为标准时间
const formatter = (row: Role, column: TableColumnCtx<Role>, timeValue: number) => {
  return tool.dateFormat(timeValue)
}

// 重置
const roleReset = () => {
  roleForm.value = {
    current: 1,
    size: 5,
    roleName: '',
    rolePerm: '',
    enabled: ''
  }
  getRolePage()
}
// 分页页码
const handleCurrentPageUpdate = (page: number) => {
  roleForm.value.current = page
  getRolePage()
}
// 分页一页显示多少条
const handlePageSizeUpdate = (page: number) => {
  roleForm.value.size = page
  getRolePage()
}

// 删除
const roleDel = (id: string) => {
  ElMessageBox.confirm('是否删除角色？', {
    type: 'error',
    confirmButtonText: '删除'
  })
    .then(async () => {
      // 删除接口
      const res = await roleDelete(id)
      if (res.code != '200') return
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      getRolePage();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
</script>

<style scoped>
.card-container,
.toolbar {
  display: flex;
  margin-bottom: 15px;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 0;
  /* 垂直滚动条宽度设为 0 */
  height: 0;
  /* 水平滚动条高度设为 0 */
}

.el-main {
  height: 85vh;
  overflow-y: scroll;
}
</style>
